<template>
  <div class="main">
    <div class="list-main">
      <div class="list-nav">
        <el-menu class="list-menu">
          <el-submenu
            :index="item.key"
            v-for="item in leftList"
            :key="item.key"
          >
            <template slot="title">
              <span>{{ formatData[item.key] }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="Item in item.res"
                :index="Item[0]"
                :key="Item[0]"
                @click="changeSelect(item, Item)"
              >
                <!-- <p>
              <div v-if="Item[1]['biaozhuwzmc']" class="biaozhumc" :title="Item[1]['biaozhuwzmc']">{{ Item[1]["biaozhuwzmc"] }}</div>
              <div v-else class="biaozhumc" :title="Item[1]['biaozhuflmc']">{{ Item[1]["biaozhuflmc"] }}</div>
              <span style="margin-right:13px;">{{ Item[1]["count"] }}</span>
            </p> -->
                <p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="Item[1]['anjianfl']"
                    placement="top"
                    v-if="Item[1]['anjianfl']"
                  >
                    <i
                      style="
                          width: 120px;
                          font-style: normal;
                          display: inline-block;
                          color: black;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >{{ toFormatName2(Item[1]["anjianfl"]) }}</i
                    >
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="Item[1]['biaozhuwzmc']"
                    placement="top"
                    v-if="Item[1]['biaozhuwzmc']"
                  >
                    <i
                      style="
                          width: 120px;
                          font-style: normal;
                          display: inline-block;
                          color: black;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >{{ Item[1]["biaozhuwzmc"] }}</i
                    >
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="Item[1]['biaozhuflmc']"
                    placement="top"
                    v-if="Item[1]['biaozhuflmc']"
                  >
                    <i
                      style="
                          width: 120px;
                          font-style: normal;
                          display: inline-block;
                          color: black;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >{{ Item[1]["biaozhuflmc"] }}</i
                    >
                  </el-tooltip>
                  <span>{{ Item[1]["count"] }}</span>
                </p>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="tagging">
      <div class="tagging-h">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
          <el-form-item>
            <!-- <el-input
              class="h35"
              style="width: 400px"
              v-model="formSearch.name"
              placeholder="请输入案件编号"
            ></el-input> -->
            <el-input
              class="h35"
              style="width: 400px"
              v-model="formSearch.name"
              placeholder="请输入案件编号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">
              <i class="el-icon-search bold"></i>
              搜索
            </el-button>
          </el-form-item>
        </el-form>
        <div class="r">
          <el-button
            class="e-medium"
            size="medium"
            @click="ybkOuterVisible = true"
          >
            <i class="fa fa-plus bold" aria-hidden="true"></i>
            新建主题分类
          </el-button>
          <el-button class="e-medium" size="medium" @click="_exportLableList">
            <i class="fa fa-sign-in bold" aria-hidden="true"></i>
            导出
          </el-button>
        </div>
      </div>
      <div class="tagging-c">
        <!-- :data="tableData" -->
        <!-- :data="
            tableData.filter(
              data =>
                !formSearch.name || data.anjianbh.includes(formSearch.name)
            )
          " -->
        <el-table
          ref="table"
          class="box"
          :data="tableData"
          header-row-class-name="header"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="bg">
                <div class="title">我的标注</div>
                <el-table
                  class="box"
                  :data="props.row.children"
                  header-row-class-name="header"
                  style="width: 100%"
                  :row-key="getRowKeys"
                >
                  <el-table-column prop="date" label="标注时间" width="180">
                    <template slot-scope="{ row }">
                      <span v-if="row.status !== 'edit'">{{
                        row.biaozhusj
                      }}</span>
                      <el-date-picker
                        v-else
                        v-model="row.biaozhusj"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="biaozhuwzid"
                    label="标注位置"
                    width="180"
                  >
                    <template slot-scope="{ row }">
                      <span v-if="row.status !== 'edit'">{{
                        row.biaozhuwzid
                      }}</span>
                      <el-input
                        v-else
                        v-model="row.biaozhuwzid"
                        placeholder="请输入标注位置"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="xuanqunr" label="选取内容">
                    <template slot-scope="{ row }">
                      <span v-if="row.status !== 'edit'">{{
                        row.xuanqunr
                      }}</span>
                      <el-input
                        v-else
                        v-model="row.xuanqunr"
                        placeholder="请输入选取内容"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="biaozhunr" label="我的标注">
                    <template slot-scope="{ row }">
                      <span v-if="row.status !== 'edit'">{{
                        row.biaozhunr
                      }}</span>
                      <el-input
                        v-else
                        v-model="row.biaozhunr"
                        placeholder="请输入标注"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="biaozhuflid" label="标注分类ID">
                    <template slot-scope="{ row }">
                      <span v-if="row.status !== 'edit'">{{
                        row.biaozhuflid
                      }}</span>
                      <el-input
                        v-else
                        v-model="row.biaozhuflid"
                        placeholder="请输入标注"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="right" width="200">
                    <template slot-scope="{ row }">
                      <!-- {{ row.status }} -->
                      <span
                        v-if="row.status === 'edit' || row.status === 'add'"
                      >
                        <el-button @click="operateFun('save', row)"
                          ><i class="el-icon-document" />保存</el-button
                        >
                        <el-button @click="operateFun('cancle', row)"
                          ><i class="el-icon-close" />取消</el-button
                        >
                      </span>
                      <span v-else>
                        <el-button
                          type="primary"
                          @click="operateFun('edit', row)"
                          ><i class="el-icon-edit-outline" />编辑</el-button
                        >
                        <el-button
                          style="color: #fff"
                          type="danger"
                          @click="operateFun('delete', row)"
                          ><i class="el-icon-delete" />删除</el-button
                        >
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="决定号" prop="juedingh"> </el-table-column>
          <el-table-column label="申请号" prop="shenqingh"> </el-table-column>
          <el-table-column label="发明创造名称" prop="famingmc">
          </el-table-column>
          <el-table-column label="标注时间" prop="biaozhusj"> </el-table-column>
          <el-table-column label="案件结论" prop="anjianjl"> </el-table-column>
          <el-table-column label="案件编号" prop="anjianbh"> </el-table-column>
          <el-table-column label="最近标注" prop="biaozhuid"> </el-table-column>

          <el-table-column label="操作" align="right" width="200">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteBiaozhu(scope.row)"
                ><i class="el-icon-delete bold"></i> 删除</el-button
              >
              <el-button type="text" @click="handleCheck(scope.row)"
                >{{ scope.row.isArrow ? "收起" : "展开" }}标注
                <i
                  class="el-icon-d-arrow-right"
                  :class="{
                    'arrow-up': scope.row.isArrow,
                    'arrow-dwon': !scope.row.isArrow
                  }"
                ></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="list-pagination" v-if="this.tableData.length > 0">
          <el-pagination
            :current-page="form.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 添加至样本库 -->
        <el-dialog
          title="新建主题分类"
          :visible.sync="ybkOuterVisible"
          class="list-dialog"
        >
          <el-form
            :model="ybkRuleForm"
            ref="ybkRuleForm"
            label-width="96px"
            class="list-ruleForm"
          >
            <el-form-item label="标准分类名称">
              <el-input v-model="ybkRuleForm.biaozhuflmc" placeholder="请填写">
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="ybkRuleForm.beizhu" placeholder="请填写">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="ybkOuterVisible = false">取 消</el-button>
            <el-button type="primary" @click="_createClassifiedTopics"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { deepClone } from "../../sample/sample-manage/utils/index";
import {
  lableCases,
  queryCaseLables,
  editSingleLables,
  deleteCaseLables,
  deleteSingleLables,
  exportLableList,
  createClassifiedTopics
} from "@api/details";

export default {
  data() {
    return {
      formSearch: {
        name: ""
      },
      formatData: {
        anjianfl: "案件分类",
        biaozhuwz: "标注位置",
        zidingyztfl: "自定义主题分类"
      },
      ybkRuleForm: {
        biaozhuflmc: "",
        beizhu: ""
      },
      expands: [], //只展开一行放入当前行id
      getRowKeys(row) {
        //设置row-key只展示一行
        return row.juedingh;
      },
      ybkOuterVisible: false,
      leftList: [],
      total: 0,
      form: {
        dataSource: "fushen",
        biaozhuflid: "",
        biaozhuwzid: "",
        page: 1,
        size: 10
      },
      tableData: [],
      tagObj: {
        biaozhuflid: "",
        biaozhunr: "",
        biaozhusj: "",
        biaozhuwzid: "",
        xuanqunr: "",
        status: "add"
      },
      //用于展开标记,避免开关都请求后端
      expandedFlag: 0
    };
  },
  mounted() {
    this._lableCases();
    // this._queryCaseLables();
  },
  methods: {
    toFormatName2(val) {
      switch (val) {
        case "fushen":
          return "复审";
          break;
        case "wuxiao":
          return "无效";
          break;
        case "waiguan":
          return "外观";
          break;
        case "susong":
          return "诉讼";
          break;
      }
    },
    // 翻页
    handleSizeChange(val) {
      this.form.size = val;
      this._lableCases();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this._lableCases();
    },
    onSubmit() {
      this.form.biaozhunr = this.formSearch.name;
      this._lableCases();
      console.log("submit!");
    },
    deleteBiaozhu(row) {
      // 删除当前项
      const param = {
        anjianbh: row.anjianbh,
        juedingh: row.juedingh
      };
      this._deleteCaseLables(param);
    },
    changeSelect(parent, item) {
      console.log(parent);
      console.log(item);
      if (parent.key == "biaozhuwz") {
        this.form.biaozhuwzid = item[1]["biaozhuwzid"];
      } else if (parent.key == "zidingyztfl") {
        this.form.biaozhuflid = item[1]["biaozhuflid"];
      } else if (parent.key == "anjianfl") {
        this.form.dataSource = this.toFormatName(item[1]["anjianfl"]);
      }

      this._lableCases();
    },
    handleCheck(row) {
      row.isArrow = !row.isArrow;
      if (row.isArrow) {
        this._queryCaseLables(row, row.anjianbh, row.juedingh);
      }
      this.$refs.table.toggleRowExpansion(row, row.isArrow);
    },
    async _createClassifiedTopics() {
      const { data } = await createClassifiedTopics(this.ybkRuleForm);
      this.ybkOuterVisible = false;
    },
    /* 获取标注案件data*/
    async _lableCases() {
      const { data } = await lableCases(this.form);
      console.log(data);
      this.total = data.total;
      this.tableData = data.docs || [];
      this.tableData.forEach(val => {
        this.$set(val, "isArrow", false);
      });
      this._queryCaseLables(
        this.tableData[0],
        this.tableData[0].anjianbh,
        this.tableData[0].juedingh
      );
      this.leftList = Object.entries(data.classInfos).map(item => {
        let [key, res] = item;
        res = Object.entries(res);
        return {
          key,
          res
        };
      });
    },
    /* 获取我的标注data*/
    async _queryCaseLables(result, anjianbh, juedingh) {
      const { data } = await queryCaseLables({
        anjianbh: anjianbh,
        juedingh: juedingh
      });
      console.log(data);
      this.$set(
        result,
        "children",
        data.docs.map((item, index) => {
          item.status = "view";
          return item;
        })
      );
    },
    async _editSingleLables(form) {
      const { data } = await editSingleLables(form);
    },
    async _deleteCaseLables(form) {
      const { data } = await deleteCaseLables(form);
      this.$message.success("删除成功！");
    },
    async _deleteSingleLables(form) {
      const { data } = await deleteSingleLables(form);
    },
    async _exportLableList() {
      let param = {
        anjianlx: this.form.anjianlx,
        biaozhunr: "",
        biaozhuwzid: this.form.biaozhuwzid,
        page: this.form.page,
        size: this.form.size,
        biaozhuflid: this.form.biaozhuflid
      };
      const { data } = await exportLableList(param);
    },

    operateFun(type, data) {
      console.log(data);
      // const { biaoyinxid } = data || {};
      if (type === "add") {
        // 是页面跳转还是添加一行数据 ????   尚不清楚两个都加上
        // this.tableData1.push(this.tagObj);
      } else if (type === "edit") {
        this.$set(data, "status", "edit");
      } else if (type === "delete") {
        this.$set(data, "status", "delete");
        // 删除当前项
        const param = {
          biaozhuid: data.biaozhuid
        };
        this._deleteSingleLables(param);
        // indexDel(param).then(res => {
        //   console.log(res, "------delete index------");
        //   const deleleINdex = this.tableData1.findIndex(
        //     i => i.biaoyinxid === biaoyinxid
        //   );
        //   this.tableData1.splice(deleleINdex, 1);
        // });
      } else if (type === "save") {
        this.$set(data, "status", "save");

        // 调接口保存修改，成功后更新ui
        const {
          biaozhuflid,
          biaozhunr,
          biaozhuwzid,
          xuanqunr,
          biaozhusj
        } = data;
        // if (biaoyinxid) {
        // 编辑 --> 保存
        const params = {
          biaozhusj,
          biaozhuflid,
          biaozhunr,
          biaozhuwzid,
          xuanqunr
        };
        this._editSingleLables(params);
        // }
        //else {
        // 新建 ---> 保存
        // const params = {
        //   biaoyinxlx,
        //   biaoyinxmc,
        //   biaoyinz
        // };
        // indexAdd(params).then(res => {
        //   if (res.code === 200) {
        //     this.tableData1.find(i => i.biaoyinxlx === biaoyinxlx).status =
        //       "";
        //   }
        // });
        // }
      } else if (type === "cancle") {
        this.$set(data, "status", "cancle");
        // 恢复当前项的数据
        // const deleleINdex = this.tableData1.findIndex(
        //   i => i.biaoyinxid === biaoyinxid
        // );
        // this.tableData1.splice(deleleINdex, 1, this.originData);
      }
    }
  }
};
</script>
<style>
.el-table__expanded-cell {
  background-color: #ebeef5;
}
thead .header th {
  background-color: #f7f7f7;
  color: #303133;
}
</style>
<style lang="scss" scoped>
// 公共
$main-color: #303133;
$blue-color: #2d54b8;
.el-dropdown-menu__item {
  font-size: 14px;
}
.biaozhumc {
  width: 120px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding-left: 15px;
}
.list-main {
  float: left;
}
.list-nav {
  width: 264px;
  height: auto;
  border-left: 6px solid $blue-color;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 18px;
}
.list-menu {
  border-radius: 4px;
  border-right: 1px solid #dcdfe6;
  background-color: #ffffff;
  .el-submenu__title {
    padding: 0 13px 0 15px !important;
    background-color: #ebeef5;
    color: $blue-color;
    font-size: 16px;
  }
  .el-submenu__title i {
    color: $blue-color;
  }
  .el-submenu__icon-arrow {
    font-weight: 700;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-submenu {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-menu-item {
      height: 46px;
      line-height: 46px;
      padding: 0 !important;
      p {
        margin: 0 0 0 15px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0 13px 0 0;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:focus,
      &:hover {
        p {
          border-bottom: 1px solid #ecf5ff;
        }
      }
      span {
        float: right;
        background-color: $blue-color;
        height: 24px;
        line-height: 24px;
        padding: 0 4px;
        color: #ffffff;
        border-radius: 4px;
        margin-top: 11px;
      }
    }
  }
}
.list-menu {
  .list-menu-more {
    margin: 0 10px 10px 10px;
    .el-button {
      width: 100%;
      border: 0;
      background: #ebeef5;
      border-radius: 10px;
      color: $blue-color;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      color: #ffffff;
      background-color: $blue-color;
      i {
        color: #ffffff;
      }
    }
    i {
      color: $blue-color;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 12px;
      margin: -2px 0 0 6px;
      font-weight: 700;
    }
  }
}
.tagging {
  float: left;
  margin-left: 35px;
  border: solid 1px #dcdfe6;
  padding: 20px;
  border-radius: 4px;
  background-color: #fff;
}
.tagging-c {
  // width: 890px;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}
::v-deep .el-table__expand-icon > .el-icon {
  display: none;
}
::v-deep .el-table td {
  padding: 6px 0;
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 8px 10px 31px;
}

.tagging-h {
  display: flex;
  justify-content: space-between;
}
.bg .title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  line-height: 38px;
  position: relative;
  padding-left: 14px;
  &:after {
    content: "";
    width: 4px;
    height: 13px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #3057b5;
  }
}
.box {
  border: solid 1px #dcdfe8;
  border-bottom: 0;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
  border-bottom: 1px solid #dcdfe8;
}
::v-deep .el-table::before,
::v-deep .el-table--group::after,
::v-deep .el-table--border::after {
  background-color: #dcdfe8;
}
.list-pagination {
  text-align: right;
  margin-top: 20px;
  .el-pager li {
    border: 1px solid #dcdfe6;
    height: 34px;
    line-height: 34px;
    margin: 0 3px;
    border-radius: 6px;
    &.active {
      color: $blue-color;
      cursor: default;
    }
    &.active + li {
      border-left: normal;
    }
  }
  .el-input--mini .el-input__inner {
    height: 34px;
    line-height: 34px;
  }
  .el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    height: 34px;
    line-height: 34px;
  }
}
</style>
